<template>
  <div>
    <van-sticky>
      <van-nav-bar title="类别列表" left-text="返回" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <div class="listContent">
      <div class="leftList">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="item of CategoryList "
            :key="item.id"
            :title="item.mallCateforyName"
            @click="clickLeftList(item.id)"
          />
        </van-sidebar>
      </div>
      <div class="topList">
        <div class="topTitleContainer">
          <van-tabs animated ellipsis background="beige" @click="clickTopList">
            <van-tab
              v-for="item in getCategorySubList"
              :title="item.mallSubName"
              :key="item.id"
              :name="item.id"
            />
          </van-tabs>
        </div>
      </div>
      <div class="goodsList">
        <van-card
          v-for="item in getGoodsList"
          :key="item.id"
          :price="item.presentPrice"
          :origin-price="item.oriPrice"
          :desc="item.name"
          :thumb="item.image1"
        >
          <template #tags>
            <router-link :to="{name:'goodsDetail',params:{id:item.id}}" tag="li">
              <van-tag plain type="danger">标签</van-tag>
            </router-link>
          </template>
          <!-- <router-link :to="{name:'goodsDetail',params:{id:item.id}}" tag="li"></router-link> -->
        </van-card>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getCategoryList,
  getCategorySubList,
  getGoodsList
} from "../../commonApi/request";
export default {
  name: "list",
  props: ["id"],
  data() {
    return {
      activeKey: this.id - 1 || 0,
      CategoryList: [],
      getCategorySubList: [],
      getGoodsList: []
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },

    // 获取大类的数据
    async getLeftList() {
      let _self = this;
      let { data } = await getCategoryList();
      _self.CategoryList = data.data;
      return data;
    },
    // 获取小类的数据
    async getTopList(id = 1) {
      let _self = this;
      let { data } = await getCategorySubList(id);
      _self.getCategorySubList = data.data;
      return data;
    },

    // 根据小类获取商品信息
    async getGoods(id = "2c9f6c946016ea9b016016f79c8e0000") {
      let _self = this;
      let { data } = await getGoodsList(id);
      _self.getGoodsList = data.data;
      return data;
    },
    async getDatas() {
      let _self = this;
      if (_self.id) {
        // let leftData =
        let config = _self.id;
        await _self.getLeftList();
        let topData = await _self.getTopList(config);
        await _self.getGoods(topData.data[0].id);
      } else {
        let leftData = await _self.getLeftList();
        let topData = await _self.getTopList(leftData.data[0].id);
        await _self.getGoods(topData.data[0].id);
      }
    },
    // 点击左边大类
    clickLeftList(id) {
      var _self = this;
      _self.activeKey = id;
      _self.getTopList(id).then(function(res) {
        _self.getGoods(res.data[0].id);
      });
    },
    // 点击上面小类
    clickTopList(name) {
      this.getGoods(name);
    }
  },
  created() {
    this.getDatas();
  }
};
</script>
<style >
.van-nav-bar__title {
  color: black !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}
.listContent {
  position: relative;
  height: 570px;
  overflow: hidden;
  padding-bottom: 50px;
}
.listContent > div {
  float: left;
}
.listContent .leftList {
  width: 80px;
  height: 100%;
  overflow-y: scroll;
}
.listContent .leftList .van-sidebar-item {
  background-color: #f0f8ff;
}
.van-sidebar-item--select,
.van-sidebar-item--select:active {
  background-color: #fff !important;
}
.listContent .topList {
  position: fixed;
  width: 295px;
  overflow: auto;
  /* border: 1px solid black; */
  background-color: beige;
  padding-top: 10px;
  left: 80px;
  top: 46px;
  z-index: 999;
}

.goodsList {
  position: absolute;
  width: 315px;
  height: 82%;
  left: 80px;
  top: 46px;
  overflow-y: auto;
}
.van-card__content .van-card__desc.van-ellipsis {
  font-size: 16px;
  font-weight: bold;
  padding-top: 20px;
  white-space: normal;
  overflow: initial;
}
.van-card li{
  position: absolute;
  top: 0;
  left: -88px;
  height: 100px;
  width: 315px;
  /* visibility: hidden; 这个占位隐藏还是点击不了的*/
  opacity: 0; /*将透明度设为0*/
}
</style>